import React, {
  Component,
  createRef,
  createContext,
  useRef,
  useState,
  useEffect,
} from "react";
import PropType from "prop-types";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import gsap from "gsap"; //动画库
import Stats from "stats.js"; //性能监控
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js"; // FBX 模型加载器
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'; //EffectComposer 效果组合器 它是处理 WebGLRenderer 效果的 接收 renderer为参数
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'; // RenderPass 处理通道 它是处理 scene 场景和相机 camera 的。 接收 scene camera 为参数
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';//UnrealBloomPass 泛光通道
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js'; //添加抗锯齿的效果
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass'; // 高亮发光描边通道 OutlinePass(画布宽高二维向量，场景scene,相机camera)
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; //模型加载器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; //模型解压缩

const windowWidth =   window.innerWidth
const windowHeigth = window.innerHeight

const dracoLoader = new DRACOLoader(); //模型解压缩
const loader = new GLTFLoader(); //gltf模型加载器
const scene = new THREE.Scene(); // 场景
const camera = new THREE.PerspectiveCamera(
  85,
  windowWidth / windowHeigth,
  1,
  1200
); // 相机



const renderer = new THREE.WebGLRenderer({antialias:true}); //渲染器 antialias扛锯齿 默认为false
const controls = new OrbitControls(camera, renderer.domElement); // 轨道控制器

const outlinePass = new OutlinePass(new THREE.Vector2(windowWidth,windowHeigth), scene, camera);
const axesHelper = new THREE.AxesHelper(50); // 辅助线
scene.add(axesHelper);



const raycaster = new THREE.Raycaster(); //光线投射Raycaster
window.addEventListener('click',function(event){
  outlinePass.selectedObjects = [];
  let x=( event.clientX /windowWidth ) * 2 - 1;
  let y  = - ( event.clientY /windowHeigth) * 2 + 1;
  // 通过摄像机和鼠标位置更新射线
  raycaster.setFromCamera( new THREE.Vector2(x,y), camera );
  // 计算物体和射线的焦点
    const intersects = raycaster.intersectObjects( scene.children );
  if(intersects && intersects.length !==0){
    
    outlinePass.selectedObjects = [intersects[0].object];  //6、设置需要高亮发光描边的模型对象
  } 

})
const group = new THREE.Group()
let mixer:any;
const clock = new THREE.Clock();
const Home = () => {
  useEffect(()=>{
    init()
  },[])

   function init(){
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
  
  
    const light = new THREE.AmbientLight( 0x404040 ); // soft white light
    scene.add( light );
    const directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
    scene.add( directionalLight );
    camera.position.x = 150;
    camera.position.y = 150;
    camera.position.z = 150;
  
    dracoLoader.setDecoderPath('./draco');
    loader.setDRACOLoader(dracoLoader);
  
  
  
    
  
    // 7、设置OutlinePass通道
    loader.load( '3D/111111.glb' , function ( object ) {
      const model = object.scene;
      scene.add( model );
      mixer = new THREE.AnimationMixer( model );
      for(let i =0 ;i< object.animations.length;i++){
      
        mixer.clipAction( object.animations[i] ).play(); 
      }
            // mixer.clipAction( object.animations[0] ).play(); //说明: 不要直接调用这个构造函数，而应该先用AnimationMixer.clipAction实例化一个AnimationAction，因为这个方法提供了缓存以提高性能。
      console.log( object,model,'-------------------->',mixer)
      animate();
    } );
  
   }


 
  function animate() {
  
    requestAnimationFrame(animate);
   
    controls.update();
    const delta = clock.getDelta();	
    if(mixer){
      // console.log('1223',mixer)
      mixer.update( delta );
    }
   
    renderer.render(scene, camera); //使用发光通道之后，这个就不能在用了
    // 8、使用后处理模块EffectComposer，可通过该对象的render方法调用渲染器的render方法

  }
  animate();
  return <div></div>;
};

export default Home;
